<script setup>

</script>
<template>
  <div>
      <el-form-item label="学生姓名" style="margin-left: 30%;">
        <el-input v-model="stuName" style="width: 300px" placeholder="请输入学生姓名" />&nbsp;&nbsp;&nbsp;
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="success" @click="onAdd">新增</el-button>
      </el-form-item>
      <br />
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="studentname" label="姓名" />
        <el-table-column prop="gender" label="性别" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="address" label="家庭地址" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click="onEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination background
                   layout="total, prev, pager, next,jumper"
                   :total="total"
                   :page-count="pages"
                   :current-page="pageNum"
                   @current-change="changePageNum"
    />


    <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="30%"
        :destroy-on-close="true"
    >
      <span>
        <el-form
            label-width="100px"
            :model="form"
            style="max-width: 460px"
            ref="ruleFormRef"
            :rules="rules"
        >
          <el-form-item label="学生姓名" prop="studentname">
            <el-input v-model="form.studentname" />
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age" />
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="form.gender">
              <el-radio value="男" label="男" />
              <el-radio value="女" label="女" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="form.address" />
          </el-form-item>
        </el-form>
      </span>
      <br /><br /><br />
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          提交
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {reactive,toRefs,onMounted,getCurrentInstance} from "vue";
import axios from 'axios'
import {ElMessage,ElMessageBox} from "element-plus";


export default {
    setup() {
      const {ctx} = getCurrentInstance()
      const state = reactive({
        stuName: '',
        pageNum: 1,
        pages: 0,
        total: 0,
        tableData:[],
        dialogVisible:false,
        form:{},
        rules:{
          studentname: [
            { required: true, message: '请输入学生名称', trigger: 'blur' },
          ],
          gender: [
            { required: true, message: '请选择性别', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入家庭地址', trigger: 'blur' },
          ],
          age: [
            { required: true, message: '请输入年龄', trigger: 'blur' },
            { pattern: /^(1[8-9]|[2-9]\d)$/,message: '请输入18-99的数字',trigger: 'blur' }
          ],
        }
      })
      const onSubmit = () => {
        state.pageNum=1
        getPage()
      }
      onMounted(function (){
        getPage()
      })

      const getPage = () =>{
        axios({
          url: '/api/queryPage?pageNum='+state.pageNum+"&studentname="+state.stuName,
          method: "get"
        }).then(function (result){
          console.log(result.data)
          state.pageNum = result.data.data.current
          state.pages = result.data.data.pages
          state.tableData = result.data.data.records
          state.total = result.data.data.total
        })
      }
      const changePageNum = (pageNo) => {
        state.pageNum=pageNo
        getPage()
      }

      const onAdd = () => {
        state.dialogVisible=true
        state.form = {}
      }
      const save = () => {
        ctx.$refs['ruleFormRef'].validate((valid) => {
          if (valid){
            axios({
              url: "/api/saveOrUpdate",
              method: "post",
              data: state.form
            }).then(function (result) {
              if (result.data.code == "2000"){
                ElMessage.success("操作成功")
                state.dialogVisible=false
                getPage()
              }else{
                ElMessage.error("操作失败")
              }
            })
          }else{
            return false
          }
        })
      }

      const onEdit = (row) => {
        state.dialogVisible = true
        state.form = row
      }

      const del = (id) => {
            ElMessageBox.confirm(
                '确认删除吗?',
                '警告',
                {
                  confirmButtonText: '确认',
                  cancelButtonText: '取消',
                  type: 'warning',
                }
            )
            .then(() => {
              axios({
                url: "/api/" + id,
                method: "get"
              }).then(function (result) {
                if (result.data.code == "2000") {
                  ElMessage({
                    type: 'success',
                    message: '删除成功',
                  })
                  getPage()
                } else {
                  ElMessage({
                    type: 'error',
                    message: '删除失败',
                  })
                }
              })
            })
            .catch(() => {
              ElMessage({
                type: 'info',
                message: '已取消删除',
              })
            })
      }


      return {
        ...toRefs(state),
        onSubmit,
        getPage,
        changePageNum,
        onAdd,
        save,
        onEdit,
        del
      }
    }
  }
</script>

<style scoped lang="scss">

</style>